<template>
	<view class="page">
		<view class="container">
			<form>
				<view class="form-item">
					<text class="label">手机号</text>
					<input v-model="form.phone" type="text" placeholder="请输入手机号" required />
				</view>

				<view class="form-item">
					<text class="label">密码</text>
					<input v-model="form.password" type="password" placeholder="请输入密码" required class="flex-1" />
				</view>

				<view class="form-item">
					<text class="label">姓名</text>
					<input v-model="form.username" type="text" placeholder="请输入姓名" required />
				</view>

				<view class="form-item">
					<text class="label">身份</text>
					<picker v-model="form.type" :range="typeOptions" range-key="text" @change="typeChange">
						<view class="picker">
							<text>{{ form.type == '1' ? '乘客' : '司机' }}</text>
						</view>
					</picker>
				</view>

				<button type="submit" class="submit-button" @click="handleSubmit">注册</button>
			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 注册表单数据
const form = ref({
	phone: '',
	password: '',
	username: '',
	status: '',
	type: '2'
});

// 认证状态选项
const statusOptions = [
	{ text: '普通用户', value: '1' },
	{ text: '司机用户', value: '2' },
	{ text: '司机用户，认证', value: '3' },
	{ text: '司机用户，冻结', value: '4' }
];

// 身份选项
const typeOptions = [
	{ text: '乘客', value: '1' },
	{ text: '司机', value: '2' }
];

function typeChange(e: any) {
	form.value.type = e.detail.value + 1 + '';
}

// 注册表单提交处理函数
const handleSubmit = async () => {
	try {
		// 这里可以调用后端API进行用户注册
	} catch (error) {
		uni.showToast({
			title: '网络错误，请稍后再试',
			icon: 'none'
		});
	}
};
</script>

<style scoped>
.container {
	width: 100vw;
	padding: 20px;
	box-sizing: border-box;
}

.form-item {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.label {
	font-size: 16px;
	font-weight: bold;
}

input {
	padding: 10px;
	margin-top: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.picker {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 5px;
}

.submit-button {
	width: 100%;
	padding: 12px;
	background-color: #007aff;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 16px;
}
</style>
